<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>多级侧边栏菜单，固定位置适用于后台</title>
    <link href="static/css/navBar.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous">
    </script>
    <script src="static/js/navOptions.js"></script>
    <script src="static/js/navBar.js"></script>
    <style>
        body {
            font-family: 'Open Sans';
            background-color: #ccc;
        }

        h1 {
            margin: 150px auto 30px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="navBarOut">
        <div class="navBar"><a href="undefined" class="logo_area"><img src="undefined"></a>
            <ul class="navBar_ul" style="height: 738px;">
                <li id="page1"><a class="first_nav_name" href="#1"><span>Users</span></a></li>
                <li id="page2"><a class="first_nav_name" href="#2"><span>Agents</span></a></li>
                <li id="page3"><a class="first_nav_name" onclick="navSwitchShowmore('page3')"><span>Message</span><img
                            src="static/img/show-more.png" class="showMore"></a>
                    <ul class="secNavBar_ul">
                        <li><a id="page3_1" class="second_nav_name" href="#31">Message 1</a></li>
                        <li><a id="page3_2" class="second_nav_name" href="#32">Message 2</a></li>
                    </ul>
                </li>
                <li id="page4"><a class="first_nav_name" href="#4"><span>Advertisement</span></a></li>
                <li id="page5"><a class="first_nav_name" onclick="navSwitchShowmore('page5')"><span>Finance</span><img
                            src="static/img/show-more.png" class="showMore"></a>
                    <ul class="secNavBar_ul" style="display: none;">
                        <li><a id="page5_1" class="second_nav_name" href="#51">Finance 1</a></li>
                        <li><a id="page5_2" class="second_nav_name active" href="#52">Finance 2</a></li>
                        <li><a id="page5_3" class="second_nav_name" href="#53">Finance 3</a></li>
                        <li><a id="page5_4" class="second_nav_name" href="#54">Finance 4</a></li>
                        <li><a id="page5_5" class="second_nav_name" href="#55">Finance 5</a></li>
                        <li><a id="page5_6" class="second_nav_name" href="#56">Finance 6</a></li>
                        <li><a id="page5_7" class="second_nav_name" href="#57">Finance 7</a></li>
                        <li><a id="page5_8" class="second_nav_name" href="#58">Finance 8</a></li>
                    </ul>
                </li>
                <li id="page6"><a class="first_nav_name" onclick="navSwitchShowmore('page6')"><span>Analysis</span><img
                            src="static/img/show-more.png" class="showMore"></a>
                    <ul class="secNavBar_ul">
                        <li><a id="page6_1" class="second_nav_name" href="#61">Analysis 1</a></li>
                        <li><a id="page6_2" class="second_nav_name" href="#62">Analysis 2</a></li>
                        <li><a id="page6_3" class="second_nav_name" href="#63">Analysis 3</a></li>
                        <li><a id="page6_4" class="second_nav_name" href="#64">Analysis 4</a></li>
                        <li><a id="page6_5" class="second_nav_name" href="#65">Analysis 5</a></li>
                        <li><a id="page6_6" class="second_nav_name" href="#66">Analysis 6</a></li>
                        <li><a id="page6_7" class="second_nav_name" href="#67">Analysis 7</a></li>
                    </ul>
                </li>
                <li id="page7"><a class="first_nav_name" onclick="navSwitchShowmore('page7')"><span>Payout</span><img
                            src="static/img/show-more.png" class="showMore"></a>
                    <ul class="secNavBar_ul">
                        <li><a id="page7_1" class="second_nav_name" href="#71">Payout 1</a></li>
                        <li><a id="page7_2" class="second_nav_name" href="#72">Payout 2</a></li>
                    </ul>
                </li>
                <li id="page8"><a class="first_nav_name" onclick="navSwitchShowmore('page8')"><span>Settings</span><img
                            src="static/img/show-more.png" class="showMore"></a>
                    <ul class="secNavBar_ul">
                        <li><a id="page8_1" class="second_nav_name" href="#81">Settings 1</a></li>
                        <li><a id="page8_2" class="second_nav_name" href="#82">Settings 2</a></li>
                        <li><a id="page8_3" class="second_nav_name" href="#83">Settings 3</a></li>
                        <li><a id="page8_4" class="second_nav_name" href="#84">Settings 4</a></li>
                        <li><a id="page8_5" class="second_nav_name" href="#85">Settings 5</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>




    <div align="center" style="padding:20px;">
        <script type="text/javascript">
        </script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
    </div>
    <script>
        navBar(navOptions, 'page5_2');
    </script>

</body>

</html>